<template>
<div class="management-user-edit views-container">
    <section class="flex-row flex-warp form-group">
        <div class="wlm-form">
            <div class="wlm-form-header">基本资料</div>
            <div style="margin:20px 90px;">
            </div>
            <div class="wlm-form-content flex-row">
                <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                    <el-form-item label="订单编号：">
                        <span>{{formFormatData.formData.order.order_no||'-'}}</span>
                    </el-form-item>
                    <el-form-item label="订单来源：">
                        <span>{{sourceType[`${formFormatData.formData.order.source}`]}}</span>
                    </el-form-item>
                    <el-form-item label="支付方式：">
                        <span>{{payType[`${formFormatData.formData.order.pay_type}`]}}</span>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </section>
    <template>
        <div class="wlm-form" v-if="isFormFormatGetEnd && hasTableData">
            <div class="wlm-form-header">
                <span>核销记录</span>
            </div>
            <div class="wlm-form-content flex-row">
                <el-form :ref="formFormatData.key" :model="formFormatData.formData.order" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                    <el-form-item label-width="0" v-for="(item, index) in formFormatData.formData.list" :key="index">
                      <el-form-item label-width="140px" label="用户：">
                        <span v-if="item.nickName">{{item.nickName}}</span>
                        <span v-if="!item.nickName">-</span>
                      </el-form-item>
                      <el-form-item label-width="140px" label="核销时间：">
                          <span>{{item.check_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
                      </el-form-item>
                      <el-form-item label-width="140px" label="核销人员：">
                          <span v-if="item.name">{{item.name}}</span>
                          <span v-if="!item.name">后台核销</span>
                      </el-form-item>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="no-tabledata" v-cloak v-if="isFormFormatGetEnd && !hasTableData">
            <svg-icon icon-class="notabledata" />
            <span class="title pos-row-center">暂无核销记录</span>
        </div>
    </template>
</div>
</template>

<script>
import {
  orderDetail,
  orderCheckCodeRecord
} from '@/api/orders'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'OrdersManagementVerification',
  components: {

  },
  computed: {
    oerderId() {
      return this.$route.query.order_id || ''
    }
  },
  directives: {

  },
  created() {
    this.$nextTick(item => {
      orderCheckCodeRecord({ order_id: this.oerderId }).then(response => {
        const { data: { data: msgData = {} } } = response
        console.log(msgData.list)
        const hasData = Array.isArray(msgData.list) && msgData.list.length > 0
        console.log(Array.isArray(msgData.list))
        console.log(msgData.list.length > 0)
        this.hasTableData = hasData
        this.formFormatData.formData = msgData
        console.log(this.formFormatData.formData)
      })
    })
  },
  data() {
    return {
      hasTableData: false,
      sourceType: {
        '1': '导入',
        '2': '微信小程序',
        '3': 'H5',
        '4': '公众号',
        '5': '安卓',
        '6': '苹果',
        '7': '支付宝小程序',
        '8': '百度小程序',
        '9': '头条小程序',
        '-': '-'
      },
      payType: {
        'wechat': '微信',
        'admin': '后台确认',
        'alipay': '支付宝',
        'blance': '余额',
        'zero': '零元',
        '-': '-'
      },
      formFormatData: {
        key: 'smsSettings',
        api: {
          editForm: {
            api: orderDetail,
            params: {
              redirect: 'order_id',
              always: true
            }
          }
        },
        formData: {
        },
        rules: {

        }
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.management-user-edit {
    .no-tabledata {
        position: relative;
        background: #ffffff;

        & svg {
            font-size: 28em;
        }

        text-align: center;

        /depp/ #icon-notabledata {
            fill: #409EFF !important
        }

        & .title {
            bottom: 42px;
            font-size: 18px;
        }
    }

    .form-group {
        .wlm-form {
            width: 500px;
            flex-grow: 1;
            margin-right: 20px;
        }
    }

    .total-money {
        font-size: 14px;
        margin-bottom: 58px;

        .total-title {
            display: inline-block;
            text-align: right;
            width: 70px;
            margin-right: 10px;
        }
    }

    .wlm-form {
        min-height: auto;
    }

    .wlm-form-steps {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .send-type {
        margin-top: 15px;

        .el-button {
            padding: 20px 40px;

            &>span {
                &>p {
                    font-weight: 600;
                    margin-bottom: 15px;
                }

                &>span {
                    display: inline-block;
                    margin-bottom: 5px;
                    color: #c3c3c3;
                }
            }
        }
    }
}
</style>
